<template>
    <div class="app-container">
        <div class="project-manage">
            <div class='main-top'>
                <el-form   label-width="70px" :inline="true" :model="searchInfo" class="form-style">
                    <el-form-item label="会议名称:">
                        <el-input v-model= searchInfo.mName  placeholder=""></el-input>
                        <el-button @click="search()"  type="primary">搜索</el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-button @click="reSet()" type="primary">重置</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <div class="main-nav">
            </div>
            <div class="main-table">
                <el-table v-loading="tableLoading" stripe  :data="tableList" height="500" border style="width: 100%">
                    <el-table-column align="center" prop="mName" label="会议名称 " > </el-table-column>
                    <el-table-column align="center" prop="mBrief" label="会议简介 " > </el-table-column>
                    <el-table-column align="center" prop="address" label="会议地址" > </el-table-column>
                    <el-table-column align="center" prop="founderName" label="创建人" > </el-table-column>
                    <el-table-column align="center" prop="founderTime" label="创建时间" > </el-table-column>
                    <el-table-column  label="操作" width="180">
                        <template slot-scope="scope">
                        <el-button size="mini"  @click="getvehicleList(scope)">查看会议详情</el-button>
                        <el-button size="mini"  @click="deleteList(scope)">删除</el-button>
                        </template>
                        
                    </el-table-column>  
                </el-table>
				<div class="block">
					<el-pagination
					background
					layout="prev, pager, next"
					:total="totalPage"
					@current-change="handleCurrentChange"    
					>
					</el-pagination>
				</div>   
            </div>
            
            <template name='会议详情'>
                <el-dialog center title="会议详情" :visible.sync="machineList">
					<figure class="itemContent">
                        <h3>基本信息</h3>
                        <el-form :label-position="'left'" size=‘small’   :inline =true >
                            <div class="flexConent">
                                <el-form-item    label="会议名称:">
                                {{baseForm.mName}}
                                </el-form-item>
                                <el-form-item   label="会议性质:">
                                {{baseForm.mNatures==='1'?'外部会议':'内部会议'}}
                                </el-form-item>
                            </div>

                            <div class="flexConent">
                                <el-form-item   label="会议简介:">
                                {{baseForm.mBriefIntr}}
                            </el-form-item>
                             
                            </div>
                            
                            <div class="flexConent">
                                <el-form-item   label="会议地址:">
                                {{baseForm.address}}
                                </el-form-item>
                                <el-form-item   label="举办城市:">
                                {{baseForm.mHostCity}}
                                </el-form-item>
                            </div>

                            <div class="flexConent">
                                <el-form-item   label="会议开始日期:">
                                {{baseForm.mStartDate}}
                                </el-form-item>
                                <el-form-item   label="会议结束日期:">
                                {{baseForm.mEndDate}}
                                </el-form-item>
                                <el-form-item   label="会议报名截止日期:">
                                {{baseForm.signUpEndDate}}
                                </el-form-item>
                            </div>
                            
                            <div class="flexConent">
                                <el-form-item   label="联系人:">
                                {{baseForm.contacts}}
                                </el-form-item>
                                <el-form-item   label="联系人邮箱:">
                                {{baseForm.contactEmai}}
                                </el-form-item>
                                <el-form-item   label="联系人电话:">
                                {{baseForm.contactNumber}}
                                </el-form-item>
                            </div>
                            <el-form-item   label="创建人:">
                            {{baseForm.meetingUserId}}
                            </el-form-item>
                           
                        </el-form>
                    </figure>
                    <figure  class="itemContent">
                        <h3>外部信息</h3>
                        <div class="figureBackground" v-for='(item, index) of outsideInfo' :key='index'>
                            <el-form :label-position="'left'" size=‘small’   :inline =true>
                                <div class="flexConent">
                                    <el-form-item   label="客户姓名:">
                                    {{item.name}}
                                    </el-form-item>
                                    <el-form-item   label="单位:">
                                    {{item.largeArea}}
                                    </el-form-item>
                                    <el-form-item   label="科室:">
                                    {{item.department}}
                                    </el-form-item>
                                </div>
                                <div class="flexConent">
                                    <el-form-item   label="职级:">
                                    {{item.title}}
                                    </el-form-item>
                                </div>
                                <div class="flexConent">
                                    <el-form-item   label="去程:">
                                    <span>{{item.tripTime}}</span>
                                    <span>{{getStatue(item.tripType)}}</span>
                                    <span>{{item.tripFlightNumber}}</span>
                                    </el-form-item>
                                </div>

                                <div class="flexConent">
                                    <el-form-item   label="回程:">
                                    <span>{{item.rtripTime}}</span>
                                    <span>{{getStatue(item.rtripType)}}</span>
                                    <span>{{item.rtripFlightNumber}}</span>
                                    </el-form-item>
                                </div>
                            </el-form>
                        </div>
                    </figure>
                    <figure class="itemContent">
                        <h3>内部信息</h3>
                        <div class="figureBackground" v-for='(item, index) of insideInfo' :key='index'>
                            <el-form :label-position="'left'" size=‘small’   :inline =true>
                                <div class="flexConent">
                                    <el-form-item   label="姓名:">
                                    {{item.largeArea}}
                                    </el-form-item>
                                    <el-form-item   label="单位:">
                                    {{item.largeArea}}
                                    </el-form-item>
                                </div>
                                <div class="flexConent">
                                    <el-form-item   label="去程:">
                                    <span>{{item.tripTime}}</span>
                                    <span>{{getStatue(item.tripType)}}</span>
                                    <span>{{item.tripFlightNumber}}</span>
                                    </el-form-item>
                                </div>
                                <div class="flexConent">
                                    <el-form-item   label="回程:">
                                    <span>{{item.rtripTime}}</span>
                                    <span>{{getStatue(item.rtripType)}}</span>
                                    <span>{{item.rtripFlightNumber}}</span>
                                    </el-form-item>
                                </div>
                            </el-form>
                        </div>
                    </figure>
                    <!-- <figure class="itemContent">
                        <h3>区域信息</h3>
                        <el-form>
                            <el-form-item   label="区域人数统计:">
                            {{baseForm.areaCountInfoList}}
                            </el-form-item>
                            <el-form-item   label="已删除的报名人员:">
                            {{baseForm.deletedPeopleResList}}
                            </el-form-item>
                            <el-form-item   label=" 查询会议信息:">
                            {{baseForm.meetingInfo}}
                            </el-form-item>
                            <el-form-item   label="获取会议选项:">
                            {{baseForm.meetingOptionResList}}
                            </el-form-item>
                            </el-form>
                    </figure> -->
                    <figure class="itemContent">
                        <h3>会议照片</h3>
                        <div class='imgList'>
                            <img  v-for='(item, index) of imgList' :key='index' :src="item"/>
                        </div>
                        
                    </figure>
                </el-dialog>
            </template>
        </div>
    </div>
</template>
<script>
import {getMeetingList, getMeetingDetails, deleteList} from '@/api/meeting'
export default {
    data() {
        return {
			tableList:[],
            itemManage:false,
			machineList:false,
			searchInfo:{mName:''},
			tableLoading:false,
            currentPage:1,
            totalPage:0,
            machineInfo:[],
            baseForm:'',
            outsideInfo:'',
            insideInfo:'',
            imgList:''
        }
    },
    methods: {
      getMeetingList:function(current) {
      		this.tableLoading = true
			let params={
						"currentPage": current || this.currentPage,
						"mName": this.searchInfo.mName,
						"size": 10
					}
			getMeetingList(params).then(res =>{
				console.log(res)
          		this.tableList = res.data.data.queryAllMeetingList
                this.totalPage = res.data.data.totalRecord
                this.tableLoading = false
			})
			},
			getvehicleList:function(data){
                this.machineList = true
                const {mId} = data.row
                var params = {
                    meetingId:mId,
                    pageSize:1000,
                    currentPage:1
                }
				getMeetingDetails(params).then(res=>{
                    console.log('看数据和')
                    console.log(res)
                    this.baseForm = res.data.data.meetingInfo
                    this.outsideInfo  = res.data.data.queryMeetingEpeopleList
                    this.insideInfo  = res.data.data.queryMeetingIpeopleList
                    this.imgList = res.data.data.meetingImgList
                    console.log(this.imgList)
                    // this.machineInfo = res.data.data
                })
            },
            deleteList(item) {
                console.log(item)
                let params = {
                    meetingId:item.row.mId
                }
                deleteList(params).then(res=> {
                    this.getMeetingList()
                })
            },
            getStatue(item) {
                if(item == 0) {
                    return '待定'
                }
                if(item == 1) {
                    return '飞机、2'
                }
                if(item == 2) {
                    return '火车'
                }
                if(item == 3) {
                    return '指定位置接送'
                }
            },
			search(){
                this.currentPage = 1
				this.getMeetingList()
			},
			reSet() {
				this.searchInfo={mName:''}
				this.getMeetingList()
			},
			handleCurrentChange(current) {
            this.getMeetingList(current)
        	}
		},
		created() {
			this.getMeetingList()
		}
  
}
</script>
<style rel="stylesheet/scss" lang="scss">
   @import "src/styles/mixin.scss";
    .project-manage{
        .main-top{
            padding: 32px 15px;
            padding-bottom: 20px;
            background-color: #FFF;
            .el-input{
                width: 150px ;
            }
            .el-button{
                padding: 11px 33px;
                margin-left: 5px;
            }
            .el-form-item{
                margin-right: 0px;
            }
        }
        .main-nav{
            @include navStyle
        }
        .addenp{
            .el-form-item{
            margin-bottom: 10px;
            }
            .el-dialog__body{
            padding: 30px 35px;
            padding-bottom: 0px;
            }
            .dialog-footer{
            padding:11px 50px 29px 0px;
            text-align: right;
            .el-button{
                padding: 10px 30px;
                border: none;
            }
            .cancel{
                color: #000;
                background: #E0E0E0;
                border-radius: 3px;
            }
            }
        }
		.main-title{
			margin-bottom: 20px;
			display: flex;
			flex-direction: row;
			justify-content: space-around;
			span{
				display: inline-block;
			}
		}
		.block{
            text-align: center;
            margin-top: 15px;
        }
        .itemContent{
            .flexConent{
                width: 100%;
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                span{
                    display: inline-block;
                    margin-right: 10px;
                }
            }
           margin: 10px 0;
           font-size: 12px;
           .figureBackground{
               background-color: #eef1f6;
               margin:5px 0;
           }
           .el-form-item__content{
               font-size: 12px;
           }
           .el-form-item__label{
               font-weight: bold;
           }
           .imgList{
               display: flex;
               flex-direction: row;
               img{
                   display: inline-block;
                   height: 100px;
                   width: 100px;
                   margin: 0 5px;
               }
           }
        }
    }
</style>
